<template>
    <div>
        <div class="btnBox">
            <!-- 按钮列 左-->
            <div class="left">
                <el-button type="success" icon="el-icon-plus">添加服务类型</el-button>
            </div>
            <!-- 按钮列 右-->
            <div class="right">
                <el-button icon="iconfont icon-shaixuan" class="buttonStyle"></el-button>
                <el-button icon="iconfont icon-daochu" class="buttonStyle"></el-button>
                <el-button icon="iconfont icon-dayin" class="buttonStyle"></el-button>
            </div>
            <div class="clear"></div>
        </div>
        <!-- 表格 -->
        <el-table
        :data="tableData"
        :max-height="maxHeight"
        :height="height"
        border
        style="width: 100%"
        >
            <el-table-column
            v-for="(item , index) in headerData"
            :prop="item.prop"
            :label="item.label" 
            :key="index"
            :width="item.width"
            :min-width="item.min_width"
            :align="item.align"
            :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div v-if="item.slot">
                        <slot :name="item.prop" v-bind:row="scope.row"></slot>
                    </div>
                    <div v-if="!item.slot">
                        {{tableData[scope.$index][item.prop]}}
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default{
        name:"basicTable",
        data(){
            return{
            }
        },
        methods:{

        },
        props:{
            // 表头
            headerData:{
                type:Array,
                default:()=>{
                    return []
                }
            },
            // 表格数据
            tableData:{
                type:Array,
                default:()=>{
                    return []
                }
            },
            // 表格在表内数据过多时最大高度
            maxHeight:{
                type:Number,
                default:()=>{
                    return 1000
                }    
            },
            // 表格在无数据或数据不够时占页面高度
            height:{
                type:Number,
                default:()=>{
                    return 600
                }
            },

        }
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .buttonStyle{
        padding: 10px;
    }
    .btnBox{
        border: 1px solid #eee;
        padding: 10px 15px;
    }
    .left{
        float: left;
    }
    .right{
        float:right;
    }
    .clear{
        clear: both;
    }
</style>